<template>
    <div class="app-container">
        <el-card shadow="never" v-loading="loading">
            <el-tree
                default-expand-all
                :data="treeData"
                :props="treeProps"
                @node-click="handleNodeClick"
                @node-contextmenu="showContextmenu">
            </el-tree>
            <XContextmenu ref="contextmenu" :list="contextMenuList"/>
        </el-card>

        <el-dialog :title="dialogTitle" :visible.sync="dialogVisible">
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                <el-form-item label="父级分类" prop="pClassify">
                    <el-input v-model="form.pClassify"></el-input>
                </el-form-item>
                <el-form-item label="分类名称" prop="classifyName">
                    <el-input v-model="form.classifyName"></el-input>
                </el-form-item>
                <el-form-item label="分类编码" prop="code">
                    <el-input v-model="form.code"></el-input>
                </el-form-item>
                <el-form-item label="描述" prop="describes">
                    <el-input v-model="form.describes"></el-input>
                </el-form-item>
                <el-form-item label="排序号" prop="sort">
                    <el-input type="number" v-model="form.sort"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleSave">保 存</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import XPagination from "../../components/xpagination/XPagination";
    import * as classifyManger from "../../api/classifyManger"
    import * as formUtils from "../../utils/formUtils";
    import XContextmenu from "../../components/xcontextmenu/XContextmenu";
    export default {
        name: "list",
        components: {XContextmenu, XPagination},
        data() {
            return {
                contextMenuList:[
                    {
                        title:'添加子节点',
                        clickFn:this.addChildNode
                    },
                    {
                        title:'添加节点',
                        clickFn:this.addNode
                    },
                    {
                        title:'修改节点',
                        clickFn:this.editNode
                    },
                    {
                        title:'删除节点',
                        clickFn:this.deleteNode
                    },
                ],
                optionData:{},
                node:null,
                tree:null,
                treeData:[],
                treeProps:{
                    children:"children",
                    label:"classifyName"
                },
                dialogVisible:false,
                dialogTitle:"",
                editStatus:"add",
                form:{
                    uid:"",
                    pUid:"",
                    classifyName:"",
                    sort:1,
                    pClassify:"",
                    describes:""
                }


            }
        },
        methods: {
            showContextmenu(e, data, n, t){
                console.log("==========>",n);
                this.optionData = data;
                this.node = n;
                this.tree = t;
                this.$refs.contextmenu.showContextMenu(e);
            },
            handleNodeClick(data, node) {
                this.$refs.contextmenu.hideContextMenu();
            },
            addChildNode(){
                this.dialogTitle = "添加子节点";
                this.editStatus = "addChild";
                this.dialogVisible = true;
                this.$nextTick(()=>{
                    this.$refs.form.resetFields();
                    this.$set(this.form,"pClassify",this.node.data.classifyName)
                });

            },
            addNode(){
                this.dialogTitle = "添加节点";
                this.editStatus = "add";
                this.dialogVisible = true;
                this.$nextTick(()=>{
                    this.$refs.form.resetFields();
                    this.$set(this.form,"pClassify",this.node.parent.data.classifyName)
                });
            },
            editNode(){
                this.dialogTitle = "修改节点";
                this.editStatus = "edit";
                this.dialogVisible = true;
                this.$nextTick(()=>{
                    this.$refs.form.resetFields();
                    Object.keys(this.form).forEach(k=>{
                        this.form[k] = this.optionData[k];
                    });
                    this.$set(this.form,"pClassify",this.node.parent.data.classifyName)
                });
            },
            deleteNode(){
                this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    const param = {
                        uid:this.optionData.uid
                    };
                    classifyManger.deleteById(param).then(result =>{
                        this.getData();
                        this.$message.success("删除成功");
                    }).catch(error=>{
                        console.log(error);
                        this.$message.error("删除失败:"+error);
                    });
                }).catch(() => {
                    this.$message.info("已取消删除");
                });
            },
            getData(){
                classifyManger.queryTree({}).then(result=>{
                    console.log(result);
                    this.treeData = result.data.data;
                }).catch(error => {
                    console.log(error);
                })
            },
            handleSave(){
                this.$refs.form.validate((valid) => {
                    if (!valid) {
                        return false;
                    }
                    this.dispatchSave();
                });
            },
            dispatchSave(){
                const fnMap = {
                    "addChild":this.handleAddChild,
                    "add":this.handleAdd,
                    "edit":this.handleEdit,
                };
                fnMap[this.editStatus]();
            },
            handleAddChild(){
                const param = Object.assign({},this.form,{
                    pUid:this.optionData.uid,
                    uid:undefined,
                });
                classifyManger.insert(param).then(result =>{
                    this.getData();
                    this.$message.success("添加成功");
                    this.dialogVisible = false;
                }).catch(error=>{
                    console.log(error);
                    this.$message.error("添加失败"+error);
                });
            },
            handleAdd(){
                const param = Object.assign({},this.form,{
                    pUid:this.optionData.pUid,
                    uid:undefined,
                });
                classifyManger.insert(param).then(result =>{
                    this.getData();
                    this.$message.success("添加成功");
                    this.dialogVisible = false;
                }).catch(error=>{
                    console.log(error);
                    this.$message.error("添加失败"+error);
                });
            },
            handleEdit(){
                const param = Object.assign({},this.form);
                classifyManger.update(param).then(result =>{
                    this.getData();
                    this.$message.success("修改成功");
                    this.dialogVisible = false;
                }).catch(error=>{
                    console.log(error);
                    this.$message.error("修改失败"+error);
                });
            }
        },
        mounted() {
            this.getData()
        }
    }
</script>
